<template>
  <!-- 应聘方首页 -->
  <div class="index">
    <div class="index-wrapper">
      <div class="Header-wrapper">
        <yd-navbar title="招聘信息" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
          <router-link to="/ReleaseIinformation" slot="right" v-show="leader">
            <div class="release-right">发布</div>
          </router-link>
        </yd-navbar>
      </div>
      <div class="location">
        <v-drop :one='one' :selected='selected' :selectedUni='selectedUni' @clickArea='clickArea' @clickUni='clickUni'></v-drop>
      </div>
      <div class="list-wrapper" ref="wrapper">
        <transition appear enter-active-class="animated fadeIn" appear-active-class="animated fadeIn">
        <ul>
            <li v-for="item in userDate" :key="item.id" class="list"  @click="go(item.id)">
                <div class="list-box">
                  <div class="list-msg">
                    <h2>{{item.jobname}}</h2>
                    <p>{{item.actareaname}}</p>
                  </div>
                  <div class="list-time">
                    <span>{{item.acttime}}</span>
                    <span class="Xcolor">{{item.jobsalary}}</span>
                  </div>
                  <div class="list-icon">
                    <i class="iconfont icon-more"></i>
                  </div>
                </div>
            </li>
          </ul>
          </transition>
      </div>
      <v-nav></v-nav>
    </div>
  </div>
</template>
<script>
import Nav from '@/components/public/nav'
import DropDown from '@/components/public/dropDown'
import BScroll from 'better-scroll'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      userInfo: {},
      userDate: [], // 招聘列表信息
      dataId: '', // id
      address: [], // 获取数组
      one: [
        {
          area: '区域',
          two: [
            {
              university: '学校',
              id: 0
            }
          ],
          id: 0
        }
      ], // 地区数组
      selected: '0',
      selectedUni: '0',
      leader: false,
      clickAreaid: '',
      clickUniid: '',
      phone: '',
      img: '',
      token: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        taps: true
      })
    })
  },
  components: {
    'v-nav': Nav,
    'v-drop': DropDown,
    apis
  },
  methods: {
    arestlist () {
      this.$axios
        .post(apis + '/app/jobinfoapp/arealist',
          this.confusion(
            JSON.stringify({
              pid: '0'
            })
          ),
          {
            headers: {
              'Authorization': 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'isApp': 'isApp'
            }
          }
        )
        .then(response => {
          this.address = response.data
          for (let i = 0; i < this.address.length; i++) {
            var pInfo = this.address[i]
            var deptchildlist = pInfo.deptchildlist
            var pid = pInfo.id
            var pSimplename = pInfo.simplename
            var pObj = {}
            pObj.area = pSimplename
            pObj.id = pid
            var pArr = []
            for (let j = 0; j < deptchildlist.length; j++) {
              var uniObj = {}
              uniObj.id = deptchildlist[j].id
              uniObj.university = deptchildlist[j].simplename
              pArr.push(uniObj)
            }
            pObj.two = pArr
            this.one.push(pObj)
          }
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '加载组织失败！'
          })
        })
    },
    joblist () {
      this.$axios
        .post(
          apis + '/app/jobinfoapp/list',
          this.confusion(
            JSON.stringify({
              pid: '0'
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
        .then(response => {
          this.userDate = response.data
          // console.log(this.userDate)
          this.dataId = this.userDate.id
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '加载招聘信息失败！'
          })
        })
    },
    clickArea (value) {
      // console.log(value)
      this.clickAreaid = value
      this.$axios
        .post(
          apis + '/app/jobinfoapp/list',
          this.confusion(
            JSON.stringify({
              pid: this.clickAreaid + ''
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
        .then(response => {
          this.userDate = response.data
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '服务器异常'
          })
        })
    },
    clickUni (value) {
      this.clickUniid = value
      this.$axios
        .post(
          apis + '/app/jobinfoapp/list',
          this.confusion(
            JSON.stringify({
              pid: this.clickUniid + ''
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
        .then(response => {
          this.userDate = response.data
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '服务器异常'
          })
        })
    },
    go (id) {
      this.$router.push({
        path: '/PartTimeDetails',
        query: {
          id: id
        }
      })
    }
  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
    if (this.userInfo.member.userType === 2) {
      this.leader = true
    }
    this.arestlist()
    this.joblist()
  }
}
</script>
<style scoped>
.location {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 42px;
  background: #f1f1f1;
  z-index: 1;
}
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.list-time .Xcolor {
  color: red;
}
.release-right {
  font-size: 12px;
  color: #fff;
}
.list-wrapper {
  overflow: hidden;
  width: 100%;
  position: fixed;
  top: 87px;
  bottom: 50px;
}
.list-box {
  padding: 0 12px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  width: 100%;
}
.list-msg {
  flex: 5;
  overflow: hidden;
}
.list-msg h2 {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-msg p {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-time {
  flex: 4;
  overflow: hidden;
}
.list-time span {
  display: block;
  line-height: 12px;
  color: #666;
  text-align: right;
  height: 20px;
}
.list-icon {
  flex: 1;
  overflow: hidden;
  text-align: right;
  padding-top: 3%;
}
.list {
  overflow: hidden;
  padding: 10px 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px #dfdfdf solid;
}
</style>
